import { useMount, useInterval, useFullscreen } from "ahooks";
import { useState, useRef } from "react";

// ahooks第三方库
// https://ahooks.js.org/zh-CN/hooks
function App() {
    useMount(() => {
        console.log("我加载了");
    });
    const [count, setCount] = useState(0);
    const ref = useRef(null);
    const [
        isFullscreen,
        { enterFullscreen, exitFullscreen, toggleFullscreen },
    ] = useFullscreen(ref);
    useInterval(() => {
        setCount(count + 1);
    }, 1000);
    return (
        <div>
            ahooks
            <p>count：{count}</p>
            <div ref={ref} style={{ background: "white" }}>
                <div style={{ marginBottom: 16 }}>
                    {isFullscreen ? "Fullscreen" : "Not fullscreen"}
                </div>
                <div>
                    <button type="button" onClick={enterFullscreen}>
                        enterFullscreen
                    </button>
                    <button
                        type="button"
                        onClick={exitFullscreen}
                        style={{ margin: "0 8px" }}>
                        exitFullscreen
                    </button>
                    <button type="button" onClick={toggleFullscreen}>
                        toggleFullscreen
                    </button>
                </div>
            </div>
        </div>
    );
}

export default App;
